﻿var page = new lg.page({
    data: {
        Id: 0,
        LinkGroupId: 0,
        LinkGroupSelect: null,
    },
    mounted: function () {
        this.GetLinkGroupForSelect();
        this.LinkList();
    },
    methods: {
        GetLinkGroupForSelect: function () {
            lg.request({
                url: "/SysApi/GetLinkGroupForSelect",
                data: {IsUsing:1},
                success: function (d) {
                    if (d.code == 0 && d.data != null) {
                        for (var i in d.data) {
                            var obj = d.data[i];
                        }
                    }
                    page.LinkGroupSelect = d.data;
                }
            })
        },
        LinkList: function () {
            layui.use(['table', 'form'], function () {
                var table = layui.table;
                page.laytable = table.render({
                    elem: '#LinkList'
                    , url: '/SysApi/GetLinks'
                    , toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
                    , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    , cols: [[
                        {
                            field: 'rownum', title: '#', width: 60, templet: function (d) {
                                return d.LAY_TABLE_INDEX + 1
                            }
                        }
                        , {
                            field: 'Title', title: '标题', width: 200
                        }
                        , { field: 'LinkUrl', title: '链接地址', }
                        , {
                            field: 'ImageUrl', title: '图片地址', templet: function (d) {
                                return d.ImageUrl == "" ? "" : "<img src=\"" + d.ImageUrl + "\" />";
                            }
                        }
                        , { field: 'GroupName', title: '分组', }
                        , {
                            field: 'IsUsing', title: '是否启用', width: 120, align: "center", templet: function (d) {
                                return laySwitch.render(d.IsUsing, 'use')
                            }
                        }

                        , { fixed: 'right', title: '操作', toolbar: '#btTpl', width: 180 }
                    ]],
                });
                //头工具栏事件
                table.on('toolbar(LinkList)', function (obj) {
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch (obj.event) {
                        case 'addLink':
                            loadTpl({
                                url: "/Lgm/AddLink",
                                target: "#floatBody"
                            })
                            return false;
                            break;
                        case 'LinkGroup':
                            loadTpl({
                                url: "/Lgm/LinkGroup",
                                target: "#floatBody"
                            })
                            return false;
                            break;
                        case 'refresh':
                            page.laytable.reload();
                            break;
                    };
                });
                //监听行工具事件
                table.on('tool(LinkList)', function (obj) {
                    var data = obj.data;
                    //console.log(obj)
                    switch (obj.event) {
                        case 'del':
                            layer.confirm('真的删除行么', function (index) {
                                obj.del();
                                layer.close(index);
                            });
                            break;
                        case 'edit':
                            loadTpl({
                                url: "/Lgm/EditLink/" + data.Id,
                                target: "#floatBody"
                            })
                            break;
                        case 'use':
                            laySwitch.do({
                                obj: obj,
                                key: "IsUsing",
                                url: "/SysApi/EditLink",
                                refresh: true
                            })
                            break;
                    }

                });
            });
        },
        Group: function () {
            this.vm = new Vue({
                el: "#LinkGroups",
                data: {
                    Groups: [],
                    form: {
                        GroupName: "",
                        SortNumber: 0,
                        IsUsing: 1
                    },
                    formState: 0,
                    editIndex: null
                },
                mounted: function () {
                    this.GetGroups();
                },
                methods: {
                    GetGroups: function () {
                        var that = this;
                        lg.request({
                            url: "/SysApi/GetLinkGroups",
                            success: function (d) {
                                if (d.code == 0) {
                                    that.Groups = d.data
                                } else {
                                    top.layer.msg(d.msg, { icon: 2 });
                                }
                            }
                        })
                    },
                    Add: function () {
                        this.formState = 1;
                    },
                    Refresh: function () {
                        this.GetGroups();
                    },
                    FormInit: function () {
                        this.formState = 0;
                        this.editIndex = null;
                        this.form = {
                            GroupName: "",
                            SortNumber: 0,
                            IsUsing: 1
                        };
                        $("#AEWrap").appendTo(".lg-table tbody").siblings("tr").show();
                    },
                    Submit: function () {
                        let that = this;
                        let url = "";
                        if (this.editIndex == null) {
                            url = "/SysApi/AddLinkGroup"
                        } else {
                            url = "/SysApi/EditLinkGroup"
                        }
                        that.form.IsUsing = that.form.IsUsing ? 1 : 0
                        lg.request({
                            url: url,
                            method: "post",
                            data: that.form,
                            success: function (d) {
                                if (d.code == 0) {
                                    that.GetGroups();
                                } else {
                                    top.layer.msg(d.msg, { icon: 2 });
                                }
                            }
                        })
                        this.FormInit();
                    },
                    Delete: function (i) {
                        var that = this;
                        layer.confirm("删除将不可恢复，是否确认执行此操作？", function (index) {
                            lg.request({
                                url: "/SysApi/DeleteLinkGroup",
                                data: { Id: i },
                                success: function (d) {
                                    if (d.code == 0) {
                                        layer.close(index);
                                        layer.msg("删除成功!", { icon: 1 });
                                        that.GetGroups();
                                    } else {
                                        top.layer.msg(d.msg, { icon: 2 });
                                    }
                                }
                            })
                        })
                    },
                    Edit: function (i, event) {
                        this.formState = 1;
                        this.editIndex = i;
                        this.form = JSON.parse(JSON.stringify(this.Groups[i]));
                        let tr = $(event.target).parents("tr");
                        tr.before($("#AEWrap")).hide();
                    },
                    Use: function (id, val) {
                        var that = this;
                        lg.request({
                            url: "/SysApi/EditLinkGroup",
                            method: "post",
                            data: { Id: id, IsUsing: val },
                            success: function (d) {
                                if (d.code == 0) {
                                    layer.msg("操作成功!", { icon: 1 });
                                    that.GetGroups();
                                } else {
                                    top.layer.msg(d.msg, { icon: 2 });
                                }
                            }
                        })
                    },
                    OnSwitch: function (i) {
                        this.form.IsUsing = i;
                    }
                }
            }) 
        },
        Add: function () {
            var form = layui.form;
            var upload = layui.upload
            form.render();
            if (this.LinkGroupSelect) {
                console.log(this.LinkGroupSelect)
                lg.select.fill({
                    data: this.LinkGroupSelect,
                    value: "Id",
                    text: "GroupName",
                    target:"#GroupId",
                    callback: function () {
                        form.render();
                    }
                })
            }
            //拖拽上传
            upload.render({
                elem: '#upImg'
                , url: '/SysApi/SmallImgUpLoad' //改成您自己的上传接口
                , done: function (res) {
                    if (res.state) {
                        layer.msg('上传成功', { icon: 1 });
                        $(this.elem).find(".viewImg").html("<hr><img src='" + res.filePath + "' />");
                        $("#ImageUrl").val(res.filePath);
                    } else {
                        layer.msg(d.msg, { icon: 2 })
                    }
                }
            });
            form.on("submit(AddLink)", function (d) {
                if (!d.field.IsUsing) {
                    d.field.IsUsing = 0
                }
                lg.request({
                    url: "/SysApi/AddLink",
                    data: d.field,
                    method: 'post',
                    success: function (d) {
                        if (d.code == 0) {
                            layer.msg("添加成功！", { icon: 1 });
                            page.back(true);
                        } else {
                            layer.msg(d.msg, { icon: 2 })
                        }
                    }
                })
                return false;
            })
        },
        Edit: function (id) {
            var form = layui.form;
            var upload = layui.upload
            form.render();
            lg.request({
                url: "/SysApi/GetLink/"+id,
                success: function (d) {
                    if (d.code == 0) {
                        if (typeof d.data == "object") {
                            form.val("LinkEditForm", d.data)
                            $(".viewImg").html("<hr><img src='" + d.data.ImageUrl + "' />")
                        }
                    }
                }
            })
            if (this.LinkGroupSelect) {
                console.log(this.LinkGroupSelect)
                lg.select.fill({
                    data: this.LinkGroupSelect,
                    value: "Id",
                    text: "ClassName",
                    callback: function () {
                        form.render();
                    }
                })
            }
            //拖拽上传
            upload.render({
                elem: '#upImg'
                , url: '/SysApi/SmallImgUpLoad' //改成您自己的上传接口
                , done: function (res) {
                    if (res.state) {
                        layer.msg('上传成功', { icon: 1 });
                        $(this.elem).find(".viewImg").html("<hr><img src='" + res.filePath + "' />");
                        $("#ImageUrl").val(res.filePath);
                    } else {
                        layer.msg(d.msg, { icon: 2 })
                    }

                }
            });
            form.on("submit(EditLink)", function (d) {
                if (!d.field.IsUsing) {
                    d.field.IsUsing = 0
                }
                lg.request({
                    url: "/SysApi/EditLink",
                    data: d.field,
                    method: 'post',
                    success: function (d) {
                        if (d.code == 0) {
                            layer.msg("编辑成功！", { icon: 1 });
                            page.back(true);
                        } else {
                            layer.msg(d.msg, { icon: 2 })
                        }
                    }
                })
                return false;
            })
        }
    }
});